<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>{% block title %}U FORGET TITLEZ{% endblock title %}</title>

	<script type="text/javascript">
    	var base_path = '{{ BASE_PATH }}';
    	var data_dir = '{{ DATA_DIR }}';
		var media_url = '{{ MEDIA_URL }}';
    	var popupActive = false;
    	/*Firebug is not available?*/
    	if(!window.console) {
    	    var console = {
    	       log: function(foo){/*do nothing... obviously*/},
    	       dir: function(foo){/*again, don't break your neck just ignore the logmessage*/}
    	    };
    	}
  </script>
	<script src="{{ MEDIA_URL }}js/prototype.js" type="text/javascript"></script>
	<!--<script src="{{ MEDIA_URL }}js/scriptaculous.js" type="text/javascript"></script>-->
	<!--<script src="{{ MEDIA_URL }}js/casamcustom.js" type="text/javascript"></script>-->
	<script type="text/javascript">
		document.observe("dom:loaded",function(){
			var secondsToExpiration = parseInt('{{expiration_in_seconds}}');
			//User is logged in
			if(secondsToExpiration>0 && $('automaticLogout'))decreaseTimeToExpiration(secondsToExpiration);

			
		});

		function decreaseTimeToExpiration(currentSeconds){
			if(currentSeconds<=86400 && currentSeconds >0){
				setTimeout('decreaseTimeToExpiration('+(currentSeconds-1)+')',1000);
			}
			//86400 seconds is 1 day, which is almost like infinity to me
			if(currentSeconds > 86400){
				$('automaticLogout').update('No automatic <a href="{{ BASE_PATH }}logout">logout</a>');
			}else if(currentSeconds > 60){
				$('timeToExpiration').update(Math.round(currentSeconds / 60) + ' min');
			}else if(currentSeconds > 0){
				$('timeToExpiration').update(currentSeconds + ' sec');
			}else{
				Effect.Fade('loginWidget',{afterFinish:function(){
						$('loginWidget').update('Not logged in anymore, please <a href="{{ BASE_PATH }}login">login</a> to continue working');
						Effect.Appear('loginWidget');
					}});
	
			}
		}
	</script>
	<link rel="stylesheet" href="{{ MEDIA_URL }}css/style.css">

{% block head %}

{% endblock head %}
</head>

<body>
{% block user_dock %}
<div id="wrapper">
	<div id="header">
		<div id="logo">
			<h1><a href="{{ BASE_PATH }}">Energy Island Management Game</a></h1>
		</div>
		<div style="float:right;width:300px;height:100px;color:black;">
			<img src="{{ MEDIA_URL }}img/dock_user.jpg" style="float:left;width:48px;height:48px;font-size: 8pt;" />
			<div id="loginWidget" style="float:left;color:black;width:200px;height:55px;font-size: 8pt;margin-top:4px;margin-left:5px;">
				<b>Currently logged in:</b><br />
				{{ name }} (<a href="{{ BASE_PATH }}logout">not you?</a>)<br />
				<div id="automaticLogout" style="float:left;font-size: 8pt;color:black;">
					Automatic <a href="{{ BASE_PATH }}logout">logout</a> in approx. <p id="timeToExpiration"></p>
				</div>
			</div>
		</div>
	</div>

{% endblock user_dock %}

	<div id="menu">
		<ul>
			<li><a href="{{ BASE_PATH }}">Home</a></li>
{% block user_menu %}
{% endblock user_menu %}
		</ul>
	</div>
	
	<div id="page">
		<div id="page-bgtop">
			<div id="page-bgbtm">
				<div id="content">

{% block body %}

{% endblock body %}
					<div style="clear:both">&nbsp;</div>
				</div>
				<div style="clear:both">&nbsp;</div>
			</div>
		</div>
	</div>
	
	<div id="footer">
		<p>Copyright (c) 2010. All rights reserved.</p>
	</div>
</div>
</body>
</html>
